<script lang="ts" setup>
import { ref } from "vue";
import type { Ref } from "vue";
import type { Doctor } from "@/types/homeTypes/homeTypes.ts";
import { Toast } from "vant";
import { followOrUnfollowAPI } from "@/api/homeApi/homeApi.ts";

defineProps<{
   doctor: Doctor
}>();

const emits = defineEmits<{
   (eventName: "followSuccess"): void
}>();

const loading: Ref<boolean> = ref<boolean>(false);

const follow = async (doctor: Doctor) => {
   try {
      loading.value = true;
      await followOrUnfollowAPI(doctor.id, "doc");
      doctor.likeFlag = doctor.likeFlag === 1 ? 0 : 1;
      Toast.success({ message: doctor.likeFlag === 1 ? "关注成功" : "取消关注" });
      emits("followSuccess")
   } catch (error: any) {
      Toast.fail(error.message);
   } finally {
      loading.value = false;
   }
};

</script>
<template>
   <div class="doctor-card">
      <van-image round :src="doctor.avatar" />
      <p class="name">{{ doctor.name }}</p>
      <p class="van-ellipsis">{{ doctor.depName }}</p>
      <p>{{ doctor.positionalTitles }}</p>
      <van-button round size="small" type="primary" :loading="loading" @click="follow(doctor)">{{ doctor.likeFlag === 1 ? "已关注" : "+关注" }}</van-button>
   </div>
</template>
<style scoped lang="scss">
.doctor-card {
   width: 135px;
   height: 190px;
   background: #fff;
   border-radius: 20px;
   box-shadow: 0px 0px 11px 0px rgba(229, 229, 229, 0.2);
   text-align: center;
   padding: 15px;
   margin-left: 15px;
   display: inline-block;
   box-sizing: border-box;

   > .van-image {
      width: 58px;
      height: 58px;
      vertical-align: top;
      border-radius: 50%;
      margin: 0 auto 8px;
   }

   > p {
      margin-bottom: 0;
      font-size: 11px;
      color: var(--cp-tip);

      &.name {
         font-size: 13px;
         color: var(--cp-text1);
         margin-bottom: 5px;
      }
   }

   > .van-button {
      padding: 0 12px;
      height: 28px;
      margin-top: 8px;
      width: 72px;
   }
}
</style>
